﻿<!DOCTYPE html>
<html>
  <head>
    <title>The Eight</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/jquery.fancybox.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/indent.css">
    <link rel="stylesheet" href="fonts/fi/flaticon.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/colorpicker.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/styles.css">
  </head>
  <body>
    <!-- header page-->
    <header>
      <!-- site top panel-->
      <!-- site top panel-->
      <div class="site-top-panel">
        <div class="container">
          <div class="row">
            <div class="col-sm-6">
              <!-- lang select wrapper-->
              <div class="lang-wrap"><i class="icon-lang flaticon-earth-globe21"></i>Change your language
                <select name="billing_lang" class="lang-change">
                  <option value="">English</option>
                  <option value="AX">Åland</option>
                  <option value="AF">Afghanistan</option>
                  <option value="AL">Albania</option>
                  <option value="DZ">Algeria</option>
                  <option value="AD">Andorra</option>
                  <option value="AO">Angola</option>
                  <option value="AI">Anguilla</option>
                </select>
              </div>
              <!-- ! lang select wrapper-->
            </div>
            <div class="col-sm-6 text-right">
              <!-- social wrapper-->
              <div class="social-wrap"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              <!-- ! social wrapper-->
            </div>
          </div>
        </div>
      </div>
      <!-- ! site top panel-->
      <!-- ! site top panel-->
      <!-- Navigation panel-->
      <nav class="main-nav js-stick">
        <div class="full-wrapper relative clearfix container">
          <!-- Logo ( * your text or image into link tag *)-->
          <div class="nav-logo-wrap local-scroll"><a href="index.html" class="logo"><img src="img/the8-logo.png" data-at2x="img/the8-logo@2x.png" alt><img src="img/the8-logo-sticky.png" data-at2x="img/the8-logo-sticky@2x.png" alt class="sticky-logo"></a></div>
          <!-- Main Menu-->
          <div class="inner-nav desktop-nav">
            <ul class="clearlist">
              <!-- Item With Sub-->
              <li><a href="index.html" class="mn-has-sub">Home <i class="fa fa-angle-down button_open"></i></a>
                <ul class="mn-sub">
                  <li><a href="index.html">Standart Slider</a></li>
                  <li><a href="index-slider.html">Full-Screen Slider</a></li>
                  <li><a href="index-video.html">Video Background</a></li>
                </ul>
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="page-about-us.html" class="mn-has-sub active">Pages <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="page-about-us.html">About Us</a></li>
                  <li><a href="page-services.html">Services</a></li>
                  <li><a href="page-procces.html">Our Procces</a></li>
                  <li><a href="page-our-team.html">Our Team</a></li>
                  <li><a href="page-profile.html">Profile</a></li>
                  <li class="active"><a href="page-components.html">Components</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="portfolio-3-col.html" class="mn-has-sub">Portfolio <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="portfolio-3-col.html">Three Columns</a></li>
                  <li><a href="portfolio-4-col.html">Four Columns</a></li>
                  <li><a href="portfolio-with-sidebar.html">With Sidebar</a></li>
                  <li><a href="portfolio-gallery.html">Gallery</a></li>
                  <li><a href="page-portfolio-single.html">Portfolio Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="blog-sidebar-right.html" class="mn-has-sub">Blog <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="blog-2-col.html" class="mn-has-sub">Columns<i class="fa fa-angle-right pull-right button_open"></i></a>
                    <ul class="mn-sub to-left">
                      <li><a href="blog-2-col.html">Two Columns</a></li>
                      <li><a href="blog-2-col-sidebar.html">Two Columns + Sidebar</a></li>
                      <li><a href="blog-3-col.html">Three Columns</a></li>
                    </ul>
                  </li>
                  <li><a href="blog-sidebar-right.html">Blog Right Sidebar</a></li>
                  <li><a href="blog-medium-img.html">Medium Images</a></li>
                  <li><a href="blog-small-img.html">Small Images</a></li>
                  <li><a href="blog-single.html">Blog Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="shop-grid.html" class="mn-has-sub">Shop <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="shop-grid.html">Shop Grid</a></li>
                  <li><a href="shop-cart.html">Shop Cart</a></li>
                  <li><a href="shop-checkout.html">Shop Checkout</a></li>
                  <li><a href="shop-single.html">Shop Single Product</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item-->
              <li><a href="page-contact.html">Contact</a></li>
              <!-- End Item-->
              <!-- Cart-->
              <li class="menu-shop-card"><a href="#" class="mn-has-sub"><i class="flaticon-shopping-carts6 button_open"><span>2</span></i></a>
                <ul class="mn-sub right">
                  <li>
                    <aside class="widget-top-sellers shop-cart-menu">
                      <p>You have 
                        <span2 class="tx-color-2">item(s)</span2> in your shopping bag
                      </p>
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/6.jpg" data-at2x="pic/shop/70x70/6@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Phasellus accumsan cur</a></h3>
                        <div class="price">1 x $55.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/1.jpg" data-at2x="pic/shop/70x70/1@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Aenean posuere tortor</a></h3>
                        <div class="price">3 x $120.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <hr class="mt-10 mb-10">
                      <div class="sub-total clearfix">Sub Total: <span>$2400</span></div>
                      <hr class="mt-10 mb-10">
                      <div class="row">
                        <div class="col-xs-6"><a href="shop-cart.html" class="cws-button full-width">View Cart</a></div>
                        <div class="col-xs-6"><a href="shop-checkout.html" class="cws-button full-width">Checkout</a></div>
                      </div>
                    </aside>
                  </li>
                </ul>
              </li>
              <!-- End Cart-->
              <!-- Search-->
              <li class="search"><a href="#" class="mn-has-sub"><i class="flaticon-magnifying-glass34 search-icon"></i></a>
                <ul class="search-sub">
                  <li>
                    <div class="container">
                      <div class="mn-wrap">
                        <form method="post" class="form">
                          <div class="search-wrap">
                            <input type="text" placeholder="Search . . ." class="form-control search-field">
                          </div>
                        </form>
                      </div>
                      <div class="close-button flaticon-cancel30"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!-- End Search-->
            </ul>
          </div>
          <!-- End Main Menu-->
        </div>
      </nav>
      <!-- End Navigation panel-->
      <!-- breadcrumbs start-->
      <section class="breadcrumbs">
        <div class="container">
          <div class="row">
            <div class="col-sm-6"> 
              <h1>Accordion</h1>
            </div>
            <div class="col-sm-6 text-right breadcrumbs-item"><a href="index.html">home</a><i class="fa fa-angle-right"></i><a href="page-components.html">Pages</a><i class="fa fa-angle-right"></i><a href="#">Components</a></div>
          </div>
        </div>
      </section>
      <!-- ! breadcrumbs end-->
    </header>
    <!-- ! header page-->
    <div class="container page">
      <div class="row">
        <div class="col-md-9">
          <!-- accordion default-->
          <div id="accordoin" class="element-section">
            <div class="accordion style-1">
              <div class="content-title"> <span class="active"><i class="accordion-icon"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content"> 
                <p>Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
                <ul class="style-2">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                </ul>
              </div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. </span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i> Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. </span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. </span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
            </div>
          </div>
          <!-- ! accordion default-->
          <!-- accordion style-2-->
          <div class="element-section">
            <div class="accordion style-2">
              <div class="content-title"> <span class="active"><i class="accordion-icon"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content overflow-h clearfix"> <img src="pic/230x160-1.jpg" data-at2x="pic/230x160-1@2x.jpg" alt class="color-4 img-inside-tabs">
                <p>Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. </p>
                <ul class="style-2">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                </ul>
              </div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
            </div>
          </div>
          <!-- ! accordion style-2-->
          <!-- accordion style-3-->
          <div class="element-section">
            <div class="accordion style-3">
              <div class="content-title"> <span class="active"><i class="flaticon-play-button14 accordion-icon"></i>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien.</span></div>
              <div class="content overflow-h clearfix"> <img src="pic/230x160-1.jpg" data-at2x="pic/230x160-1@2x.jpg" alt class="color-4 img-inside-tabs">
                <p>Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. </p>
                <ul class="style-2">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                </ul>
              </div>
              <div class="content-title"> <span><i class="flaticon-play-button14 accordion-icon"></i>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. </span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="flaticon-play-button14 accordion-icon"></i>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. </span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="flaticon-play-button14 accordion-icon"></i> Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
            </div>
          </div>
          <!-- ! accordion style-3-->
          <!-- accordion style-4-->
          <div class="element-section mb-60">
            <div class="accordion style-4">
              <div class="content-title"> <span class="active"><i class="flaticon-play-button14 accordion-icon"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content overflow-h clearfix"> <img src="pic/230x160-1.jpg" data-at2x="pic/230x160-1@2x.jpg" alt class="color-4 img-inside-tabs">
                <p>Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. </p>
                <ul class="style-2">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                </ul>
              </div>
              <div class="content-title"> <span><i class="flaticon-play-button14 accordion-icon"></i>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="flaticon-play-button14 accordion-icon"></i>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <span><i class="flaticon-play-button14 accordion-icon"></i>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. </span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
            </div>
          </div>
          <!-- ! accordion style-4-->
          <hr>
          <!-- button section-->
          <div id="buttons" class="element-section button-grid mt-70 mb-60">
            <div class="row">
              <div class="col-sm-3 mb-sm-20"><a href="#" class="cws-button mini">Mini</a></div>
              <div class="col-sm-3 mb-sm-20"><a href="#" class="cws-button small color-2">Small</a></div>
              <div class="col-sm-3 mb-sm-20"><a href="#" class="cws-button color-3">Medium</a></div>
              <div class="col-sm-3 text-right mb-sm-20"><a href="#" class="cws-button large color-4">Large</a></div>
            </div>
            <div class="row">
              <div class="col-sm-3 mb-sm-20"><a href="#" class="cws-button mini alt">Mini</a></div>
              <div class="col-sm-3 mb-sm-20"><a href="#" class="cws-button small color-2 alt">Small</a></div>
              <div class="col-sm-3 mb-sm-20"><a href="#" class="cws-button color-3 alt">Medium</a></div>
              <div class="col-sm-3 text-right mb-sm-20"><a href="#" class="cws-button large color-4 alt">Large</a></div>
            </div>
            <div class="row">
              <div class="col-sm-6 mb-sm-20"><a href="#" class="cws-button alt full-width">Update Totals</a></div>
              <div class="col-sm-6 mb-sm-20"><a href="#" class="cws-button full-width">Update Totals</a></div>
            </div>
            <div class="row">
              <div class="col-sm-4 mb-sm-20"><a href="#" class="cws-button with-icon">Learn More<i class="flaticon-lights7"></i></a></div>
              <div class="col-sm-4 text-center mb-sm-20"><a href="#" class="cws-button with-icon">Learn More<i class="flaticon-paint-palette1"></i></a></div>
              <div class="col-sm-4 text-right mb-sm-20"><a href="#" class="cws-button with-icon color-4">Learn More<i class="flaticon-diamond7"></i></a></div>
            </div>
            <div class="row">
              <div class="col-sm-4 mb-sm-20"><a href="#" class="cws-button with-icon alt">Learn More<i class="flaticon-lights7"></i></a></div>
              <div class="col-sm-4 text-center mb-sm-20"><a href="#" class="cws-button with-icon alt">Learn More<i class="flaticon-paint-palette1"></i></a></div>
              <div class="col-sm-4 text-right mb-sm-20"><a href="#" class="cws-button with-icon alt color-4">Learn More<i class="flaticon-diamond7"></i></a></div>
            </div>
          </div>
          <!-- ! button section-->
          <hr>
          <!-- call out section-->
          <div id="callout" class="element-section mt-60">
            <div class="row mb-40">
              <div class="col-md-12">
                <div class="call-out-box style-color-2 clearfix">
                  <div class="callout-content">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, itaque.</p>
                  </div><a href="#" class="cws-button color-2 alt large">Read More</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="call-out-box with-icon clearfix"><i class="flaticon-diamond7"></i>
                  <div class="callout-content">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, alias, dolor.</p>
                  </div><a href="#" class="cws-button alt large">Read More</a>
                </div>
              </div>
            </div>
          </div>
          <!-- ! call out section-->
          <hr>
          <!-- grid section-->
          <div id="columns" class="element-section mt-50">
            <div class="row">
              <div class="col-md-12">
                <h4 class="mt-0">Full Width</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum soci is nato a que penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellente sque eu, pretes uma quis, sem. Nulla consequat massa quis enim.
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-md-30">
                <h4 class="mt-0">1/2 Column</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ae nean commodo ligula eget dolor. Aenean massa. Cum soci is nato a que penatibus et magnis dis parturient.
              </div>
              <div class="col-md-6">
                <h4 class="mt-0">1/2 Column</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ae nean commodo ligula eget dolor. Aenean massa. Cum soci is nato a que penatibus et magnis dis parturient.
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 mb-md-30">
                <h4 class="mt-0">1/3 Column</h4>Lorem ipsum dolor sit amet, consectet uer adipiscing elit. Ae nean commodo ligula eget dolor.
              </div>
              <div class="col-md-4 mb-md-30">
                <h4 class="mt-0">1/3 Column</h4>Lorem ipsum dolor sit amet, consectet uer adipiscing elit. Ae nean commodo ligula eget dolor.
              </div>
              <div class="col-md-4">
                <h4 class="mt-0">1/3 Column</h4>Lorem ipsum dolor sit amet, consectet uer adipiscing elit. Ae nean commodo ligula eget dolor.
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 mb-md-30">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
              <div class="col-md-3 mb-md-30">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
              <div class="col-md-3 mb-md-30">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
              <div class="col-md-3">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 mb-md-30">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
              <div class="col-md-9">
                <h4 class="mt-0">3/4 Column</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget doleor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridic ulus mus. Donec quam felis, ultricies nec, pellentesque eu.
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 mb-md-30">
                <h4 class="mt-0">1/3 Column</h4>Lorem ipsum dolor sit amet, consectet uer adipiscing elit. Ae nean commodo ligula eget dolor.
              </div>
              <div class="col-md-8">
                <h4 class="mt-0">2/3 Column</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula a eget doleor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridic ulus mus. Donec quam felis, ultricies nec.
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 mb-md-30">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
              <div class="col-md-3 mb-md-30">
                <h4 class="mt-0">1/4 Column</h4>Lorem ipsum dolor sit am a et, consectet uer adipiscing elit, nean commodo.
              </div>
              <div class="col-md-6">
                <h4 class="mt-0">1/2 Column</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ae nean commodo ligula eget dolor. Aenean massa. Cum soci is nato a que penatibus et magnis dis parturient.
              </div>
            </div>
          </div>
          <!-- ! grid section-->
          <hr>
          <!-- service items-->
          <div id="icons" class="element-section mt-50 mb-25">
            <div class="row">
              <div class="col-sm-6 mb-sm-40">
                <div class="service-item icon-right"><i class="flaticon-pencils13 cws-icon border-icon"></i>
                  <h3>Clear Design</h3>
                  <p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a href="#">See More !</a></p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="service-item icon-right"><i class="flaticon-cogwheels10 cws-icon border-icon alt color-4"></i>
                  <h3>Unbelievable options</h3>
                  <p class="mb-0">Cum sociis natoque penatibus et magnis disel parturi ent montes, nascetur ridiculus mus. Do nec quam felis, ultricies nec. <a href="#" class="color-4">Learn More !</a></p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 mb-sm-40">
                <div class="service-item icon-right"><i class="flaticon-play-video3 cws-icon tx-color-2"></i>
                  <h3>Video Background Sections</h3>
                  <p class="mb-0">Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhones cus eel metro. </p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="service-item icon-right"><i class="flaticon-layer13 cws-icon tx-color-4"></i>
                  <h3>Parallax Background Sections</h3>
                  <p class="mb-0">Phasellus consectetuer vestibulum elit. Aenean tellus metus, bib endum sed, posuere .</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 mb-sm-40">
                <div class="service-item icon-center"><i class="flaticon-cogwheels10 cws-icon type-3 color-3 alt"></i>
                  <h3>Parallax Background Sections</h3>
                  <p class="mb-0">Phasellus consectetuer vestibulum elit. Aenean tellus metus, bib endum sed, posuere .  <a href="#" class="color-3">Learn More !</a></p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="service-item icon-center"><i class="flaticon-smartphones23 cws-icon type-3 color-4"></i>
                  <h3>Parallax Background Sections</h3>
                  <p class="mb-0">Phasellus consectetuer vestibulum elit. Aenean tellus metus, bib endum sed, posuere .  <a href="#" class="color-4">Learn More !</a></p>
                </div>
              </div>
            </div>
            <!-- social icon-->
            <div class="row">
              <div class="col-md-12"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
            </div>
            <!-- ! social icon-->
          </div>
          <hr>
          <!-- list types-->
          <div id="lists" class="element-section mt-50">
            <p class="mb-20">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum soci is nato a que penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellente sque eu, pretes uma quis, sem. Nulla consequat massa quis enim.</p>
            <div class="row">
              <div class="col-sm-4 mb-sm-30">
                <ul class="mb-0">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                  <li>Aliquam turpis nibh, dictum eu consequat</li>
                </ul>
              </div>
              <div class="col-sm-4 mb-sm-30">
                <ul class="style-2 mb-0">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                  <li>Aliquam turpis nibh, dictum eu consequat</li>
                </ul>
              </div>
              <div class="col-sm-4">
                <ul class="style-3 mb-0">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                  <li>Aliquam turpis nibh, dictum eu consequat</li>
                </ul>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-4 mb-sm-30">
                <ol class="mb-0">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                  <li>Aliquam turpis nibh, dictum eu conseq</li>
                </ol>
              </div>
              <div class="col-sm-4 mb-sm-30">
                <ul class="style-4 mb-0">
                  <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li>Donec tempor erat vel scelerisque posue</li>
                  <li>Nam elementum elit eget tellus faucibus</li>
                  <li>Aliquam turpis nibh, dictum eu consequat</li>
                </ul>
              </div>
              <div class="col-sm-4">
                <ul class="icon-style mb-0">
                  <li><i class="list-icon flaticon-smartphones23"></i>Etiam lobortis nulla mi, ac lacinia mauris </li>
                  <li><i class="list-icon flaticon-lights7"></i>Donec tempor erat vel scelerisque posue</li>
                  <li><i class="list-icon flaticon-diamond7"></i>Nam elementum elit eget tellus faucibus</li>
                  <li><i class="list-icon flaticon-calendars12"></i>Aliquam turpis nibh, dictum eu conset</li>
                </ul>
              </div>
            </div>
          </div>
          <!-- ! list types-->
          <hr>
          <!-- allert messages-->
          <div id="messages" class="element-section mt-60 mb-60">
            <div role="alert" class="alert alert-notice alert-dismissible fade in mb-40">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon flaticon-speaker23"></i><strong>Notice Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </div>
            <div role="alert" class="alert alert-warning alert-dismissible fade in mb-40">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-lightning24"></i><strong>Warning Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </div>
            <div role="alert" class="alert alert-success alert-dismissible fade in mb-40">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-check-mark"></i><strong>Success Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </div>
            <div role="alert" class="alert alert-danger alert-dismissible fade in mb-40">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-exclamation-mark1"></i><strong>Error Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </div>
            <div role="alert" class="alert alert-info alert-dismissible fade in mb-40">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-info31"></i><strong>Info Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </div>
            <div role="alert" class="alert alert-useful alert-dismissible fade in mb-40">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon flaticon-lights7"></i><strong>Useful Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </div>
            <!-- alternative alert-->
            <div role="alert" class="alert alert-notice alt alert-dismissible fade in mb-60">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon flaticon-speaker23"></i><strong>Notice Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            </div>
            <div role="alert" class="alert alert-warning alt alert-dismissible fade in mb-60">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-lightning24"></i><strong>Warning Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
            </div>
            <div role="alert" class="alert alert-success alt alert-dismissible fade in mb-60">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-check-mark"></i><strong>Success Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            </div>
            <div role="alert" class="alert alert-danger alt alert-dismissible fade in mb-60">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-exclamation-mark1"></i><strong>Error Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            </div>
            <div role="alert" class="alert alert-info alt alert-dismissible fade in mb-60">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon border flaticon-info31"></i><strong>Info Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            </div>
            <div role="alert" class="alert alert-useful alt alert-dismissible fade in">
              <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button><i class="alert-icon flaticon-lights7"></i><strong>Useful Message!</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            </div>
            <!-- ! alternative alert-->
          </div>
          <!-- allert messages-->
          <hr>
          <!-- counter blocks-->
          <div id="counter" class="element-section mt-60 mb-60">
            <div class="row mb-40 cws-multi-col">
              <div class="col-md-3 col-sm-6 mb-md-30">
                <div class="counter-block"><i class="counter-icon flaticon-social-network156"></i>
                  <div data-count="4350" class="counter">0</div>
                  <div class="counter-name">User Online</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 mb-md-30">
                <div class="counter-block st-color-2"><i class="counter-icon flaticon-diamond7"></i>
                  <div data-count="5600" class="counter">0</div>
                  <div class="counter-name">Prizes Win</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 mb-sm-30">
                <div class="counter-block st-color-3"><i class="counter-icon flaticon-hearts49"></i>
                  <div data-count="7200" class="counter">0</div>
                  <div class="counter-name">Happy Customers</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="counter-block st-color-4"><i class="counter-icon flaticon-portfolio2"></i>
                  <div data-count="8190" class="counter">0</div>
                  <div class="counter-name">Awesome Projects</div>
                </div>
              </div>
            </div>
            <!-- alternative counter blocks-->
            <div class="row cws-multi-col">
              <div class="col-md-3 col-sm-6 mb-md-30">
                <div class="counter-block alt"><i class="counter-icon flaticon-social-network156"></i>
                  <div data-count="4350" class="counter">0</div>
                  <div class="counter-name">User Online</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 mb-md-30">
                <div class="counter-block st-color-2 alt"><i class="counter-icon flaticon-diamond7"></i>
                  <div data-count="5600" class="counter">0</div>
                  <div class="counter-name">Prizes Win</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 mb-sm-30">
                <div class="counter-block st-color-3 alt"><i class="counter-icon flaticon-hearts49"></i>
                  <div data-count="7200" class="counter">0</div>
                  <div class="counter-name">Happy Customers</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="counter-block st-color-4 alt"><i class="counter-icon flaticon-portfolio2"></i>
                  <div data-count="8190" class="counter">0</div>
                  <div class="counter-name">Awesome Projects</div>
                </div>
              </div>
            </div>
            <!-- ! alternative counter blocks-->
          </div>
          <!-- ! counter blocks-->
          <hr>
          <!-- pracing tables -->
          <div id="pricing-tables" class="element-section mt-60 mb-60">
            <div class="row cws-multi-col">
              <div class="col-md-4 col-sm-6 mb-md-30">
                <article class="pricing-tables">
                  <div class="header-pt">
                    <h3>Basic</h3>
                  </div>
                  <div class="price-pt"><sup>$</sup>6<sup>.99</sup><sub>monthly</sub></div>
                  <ul class="pricing-list">
                    <li> <i class="list-icon flaticon-social-network156"></i>1 User Account</li>
                    <li> <i class="list-icon flaticon-lights7"></i>15 Projects</li>
                    <li> <i class="list-icon flaticon-floppy20"></i>3 Gb Storage</li>
                    <li> <i class="list-icon flaticon-arrow164"></i>100 Files Upload</li>
                    <li> <i class="list-icon flaticon-clocks18"></i>3h Assistance</li>
                  </ul><a href="#" class="cws-button small">Try It Now</a>
                </article>
              </div>
              <div class="col-md-4 col-sm-6 mb-md-30">
                <article class="pricing-tables st-color-2">
                  <div class="header-pt">
                    <h3>Standart</h3>
                  </div>
                  <div class="price-pt"><sup>$</sup>12<sup>.99</sup><sub>monthly</sub></div>
                  <ul class="pricing-list">
                    <li> <i class="list-icon flaticon-social-network156"></i>5 User Account</li>
                    <li> <i class="list-icon flaticon-lights7"></i>45 Projects</li>
                    <li> <i class="list-icon flaticon-floppy20"></i>10 Gb Storage</li>
                    <li> <i class="list-icon flaticon-arrow164"></i>1000 Files Upload</li>
                    <li> <i class="list-icon flaticon-clocks18"></i>12h Assistance</li>
                  </ul><a href="#" class="cws-button small color-2">Try It Now</a>
                </article>
              </div>
              <div class="col-md-4 col-sm-6">
                <article class="pricing-tables st-color-3">
                  <div class="header-pt">
                    <h3>Premium</h3>
                  </div>
                  <div class="price-pt"><sup>$</sup>24<sup>.99</sup><sub>monthly</sub></div>
                  <ul class="pricing-list">
                    <li> <i class="list-icon flaticon-social-network156"></i>Unlimited User Account</li>
                    <li> <i class="list-icon flaticon-lights7"></i>Unlimited Projects</li>
                    <li> <i class="list-icon flaticon-floppy20"></i>100 Gb Storage</li>
                    <li> <i class="list-icon flaticon-arrow164"></i>Unlimited Files Upload</li>
                    <li> <i class="list-icon flaticon-clocks18"></i>24h Assistance</li>
                  </ul><a href="#" class="cws-button small color-3">Try It Now</a>
                </article>
              </div>
            </div>
          </div>
          <!-- ! pracing tables-->
          <hr>
          <!-- progress bars-->
          <div id="progress-bar" class="element-section mt-60 mb-60">
            <div class="row">
              <div class="col-sm-6">
                <!-- skill bar item-->
                <div class="skill-bar st-color-2">
                  <div class="name">Branding<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="60" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
                <!-- skill bar item-->
                <div class="skill-bar st-color-4">
                  <div class="name">Development<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="70" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
                <!-- skill bar item-->
                <div class="skill-bar">
                  <div class="name">Design<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="80" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
                <!-- skill bar item-->
                <div class="skill-bar st-color-3">
                  <div class="name">Support<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="90" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
              </div>
              <div class="col-sm-6 mt-sm-20">
                <!-- skill bar item-->
                <div class="skill-bar alt">
                  <div class="name">Branding<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="60" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
                <!-- skill bar item-->
                <div class="skill-bar alt st-color-5">
                  <div class="name">Development<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="70" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
                <!-- skill bar item-->
                <div class="skill-bar alt st-color-6">
                  <div class="name">Design<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="80" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
                <!-- skill bar item-->
                <div class="skill-bar alt main-gray">
                  <div class="name">Support<span class="skill-bar-perc"></span></div>
                  <div class="bar"><span data-value="90" class="cp-bg-color skill-bar-progress"></span></div>
                </div>
                <!-- ! skill bar item-->
              </div>
            </div>
          </div>
          <!-- ! progress bars-->
          <hr>
          <!-- tabs section-->
          <div id="tabs" class="element-section mt-60 mb-40">
            <!-- tabs-->
            <div class="tabs">
              <div class="block-tabs-btn clearfix">
                <div data-tabs-id="tabs1" class="tabs-btn active">Description</div>
                <div data-tabs-id="tabs2" class="tabs-btn">Reviews (3)</div>
              </div>
              <!-- tabs keeper-->
              <div class="tabs-keeper">
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs1" class="container-tabs active">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs2" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
              </div>
              <!-- /tabs keeper-->
            </div>
            <!-- /tabs-->
          </div>
          <!-- ! tabs section-->
          <!-- tabs left-control-->
          <div class="element-section mb-40">
            <!-- tabs-->
            <div class="tabs left-control clearfix">
              <div class="block-tabs-btn">
                <div data-tabs-id="tabs21" class="tabs-btn active">Description</div>
                <div data-tabs-id="tabs22" class="tabs-btn">Reviews (3)</div>
                <div data-tabs-id="tabs23" class="tabs-btn">Tags</div>
              </div>
              <!-- tabs keeper-->
              <div class="tabs-keeper">
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs21" class="container-tabs active">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs22" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <div data-tabs-id="cont-tabs23" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
              </div>
              <!-- /tabs keeper-->
            </div>
            <!-- /tabs-->
          </div>
          <!-- ! tabs left-control-->
          <!-- tabs alternative-->
          <div class="element-section mb-40">
            <!-- tabs-->
            <div class="tabs alt">
              <div class="block-tabs-btn clearfix">
                <div data-tabs-id="tabs31" class="tabs-btn active">Description</div>
                <div data-tabs-id="tabs32" class="tabs-btn">Reviews (3)</div>
                <div data-tabs-id="tabs33" class="tabs-btn">Tags</div>
              </div>
              <!-- tabs keeper-->
              <div class="tabs-keeper">
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs31" class="container-tabs active">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs32" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <div data-tabs-id="cont-tabs33" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
              </div>
              <!-- /tabs keeper-->
            </div>
            <!-- /tabs-->
          </div>
          <!-- tabs alternative-->
          <!-- tabs left-control alt-->
          <div class="element-section mb-60">
            <!-- tabs-->
            <div class="tabs alt left-control clearfix">
              <div class="block-tabs-btn">
                <div data-tabs-id="tabs41" class="tabs-btn active">Description</div>
                <div data-tabs-id="tabs42" class="tabs-btn">Reviews (3)</div>
                <div data-tabs-id="tabs43" class="tabs-btn">Tags</div>
              </div>
              <!-- tabs keeper-->
              <div class="tabs-keeper">
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs41" class="container-tabs active">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
                <!-- tabs container-->
                <div data-tabs-id="cont-tabs42" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <div data-tabs-id="cont-tabs43" class="container-tabs">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aene an massa. Cum soci is nato a que penatibus et magnis dis parturi ent montes, nascetur ridiculus eli mus.<br><br>Fusce convallis metus id felis luctus adipiscing. <ins>Pellentesque egestas</ins>, neque sit am convallis pulvinar, justo nulla eleiend aug ue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nu nc ac augue. Curabitur vestibulum aliquam leo.</p>
                </div>
                <!-- /tabs container-->
              </div>
              <!-- /tabs keeper-->
            </div>
            <!-- /tabs-->
          </div>
          <!-- ! tabs left-control alt-->
          <hr>
          <!-- carousel section-->
          <div id="team" class="element-section mt-60">
            <div class="carousel-container">
              <div class="title-carousel clearfix">
                <h2 class="carousel-heading">Carousel</h2>
                <div class="carousel-nav">
                  <div class="prev"><i class="fa fa-angle-left"></i></div>
                  <div class="next"><i class="fa fa-angle-right"></i></div>
                </div>
              </div>
              <div class="row">
                <div class="owl-three-item">
                  <!-- profile item-->
                  <div class="profile-item">
                    <div class="pic"><img src="pic/team/3.jpg" data-at2x="pic/team/3@2x.jpg" alt>
                      <div class="hover-effect"></div>
                      <div class="links"><a href="pic/team/3@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                    </div>
                    <div class="profile-info">
                      <h3 class="profile-name">Joshua Doe<span class="special"> / Developer</span></h3>
                      <div class="divider"></div>
                      <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                      <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                    </div>
                  </div>
                  <!-- ! profile item-->
                  <!-- profile item-->
                  <div class="profile-item">
                    <div class="pic"><img src="pic/team/1.jpg" data-at2x="pic/team/1@2x.jpg" alt>
                      <div class="hover-effect"></div>
                      <div class="links"><a href="pic/team/1@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                    </div>
                    <div class="profile-info">
                      <h3 class="profile-name">Scott Doe<span class="special"> / Web Designer</span></h3>
                      <div class="divider color-4"></div>
                      <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                      <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                    </div>
                  </div>
                  <!-- ! profile item-->
                  <!-- profile item-->
                  <div class="profile-item">
                    <div class="pic"><img src="pic/team/2.jpg" data-at2x="pic/team/2@2x.jpg" alt>
                      <div class="hover-effect"></div>
                      <div class="links"><a href="pic/team/2@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                    </div>
                    <div class="profile-info">
                      <h3 class="profile-name">Mary Doe<span class="special"> / Graphic Designer</span></h3>
                      <div class="divider color-2"></div>
                      <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                      <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                    </div>
                  </div>
                  <!-- ! profile item-->
                  <!-- profile item-->
                  <div class="profile-item">
                    <div class="pic"><img src="pic/team/5.jpg" data-at2x="pic/team/5@2x.jpg" alt>
                      <div class="hover-effect"></div>
                      <div class="links"><a href="pic/team/5@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                    </div>
                    <div class="profile-info">
                      <h3 class="profile-name">Joshua Doe<span class="special"> / Developer</span></h3>
                      <div class="divider"></div>
                      <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                      <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                    </div>
                  </div>
                  <!-- ! profile item-->
                  <!-- profile item-->
                  <div class="profile-item">
                    <div class="pic"><img src="pic/team/6.jpg" data-at2x="pic/team/6@2x.jpg" alt>
                      <div class="hover-effect"></div>
                      <div class="links"><a href="pic/team/6@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                    </div>
                    <div class="profile-info">
                      <h3 class="profile-name">Scott Doe<span class="special"> / Web Designer</span></h3>
                      <div class="divider color-4"></div>
                      <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                      <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                    </div>
                  </div>
                  <!-- ! profile item-->
                </div>
              </div>
            </div>
          </div>
          <!-- ! carousel section-->
          <!-- profile section-->
          <div class="element-section mb-60">
            <h2 class="mt-0 mb-30">Grid</h2>
            <div class="row cws-multi-col">
              <div class="col-md-4 col-sm-6 mb-30">
                <!-- profile item-->
                <div class="profile-item">
                  <div class="pic"><img src="pic/team/3.jpg" data-at2x="pic/team/3@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/team/3@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">Joshua Doe<span class="special"> / Developer</span></h3>
                    <div class="divider"></div>
                    <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                    <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                  </div>
                </div>
                <!-- ! profile item-->
              </div>
              <div class="col-md-4 col-sm-6 mb-30">
                <!-- profile item-->
                <div class="profile-item">
                  <div class="pic"><img src="pic/team/1.jpg" data-at2x="pic/team/1@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/team/1@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">Scott Doe<span class="special"> / Web Designer</span></h3>
                    <div class="divider color-4"></div>
                    <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                    <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                  </div>
                </div>
                <!-- ! profile item-->
              </div>
              <div class="col-md-4 col-sm-6 mb-30">
                <!-- profile item-->
                <div class="profile-item">
                  <div class="pic"><img src="pic/team/2.jpg" data-at2x="pic/team/2@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/team/2@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">Mary Doe<span class="special"> / Graphic Designer</span></h3>
                    <div class="divider color-2"></div>
                    <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                    <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                  </div>
                </div>
                <!-- ! profile item-->
              </div>
              <div class="col-md-4 col-sm-6 mb-md-30">
                <!-- profile item-->
                <div class="profile-item">
                  <div class="pic"><img src="pic/team/5.jpg" data-at2x="pic/team/5@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/team/5@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">Joshua Doe<span class="special"> / Developer</span></h3>
                    <div class="divider"></div>
                    <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                    <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                  </div>
                </div>
                <!-- ! profile item-->
              </div>
              <div class="col-md-4 col-sm-6 mb-sm-30">
                <!-- profile item-->
                <div class="profile-item">
                  <div class="pic"><img src="pic/team/6.jpg" data-at2x="pic/team/6@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/team/6@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">Scott Doe<span class="special"> / Web Designer</span></h3>
                    <div class="divider color-4"></div>
                    <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                    <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                  </div>
                </div>
                <!-- ! profile item-->
              </div>
              <div class="col-md-4 col-sm-6">
                <!-- profile item-->
                <div class="profile-item">
                  <div class="pic"><img src="pic/team/4.jpg" data-at2x="pic/team/4@2x.jpg" alt>
                    <div class="hover-effect"></div>
                    <div class="links"><a href="pic/team/4@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">Mary Doe<span class="special"> / Graphic Designer</span></h3>
                    <div class="divider color-2"></div>
                    <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                    <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
                  </div>
                </div>
                <!-- ! profile item-->
              </div>
            </div>
          </div>
          <!-- ! profile section-->
          <hr>
          <!-- comments section-->
          <div id="testimonials" class="element-section mt-60 mb-60">
            <!-- comment list section-->
            <div class="comments">
              <div class="comment-title">
                <h2>List</h2>
              </div>
              <div class="comment-list">
                <div class="comment-container clearfix">
                  <div class="author"><img src="pic/team/100x100/1.jpg" data-at2x="pic/team/100x100/1@2x.jpg" alt class="color-4">
                    <div class="author-name">Matthew Doe</div>
                  </div>
                  <div class="comment-text">
                    <p class="meta">
                      <time datetime="2016-06-07T12:14:53+00:00">23 may, 2016<span>at</span> 11:21</time>
                    </p>
                    <div class="description">
                      <p>Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultrici es sit amet, nonummy id, imperdiet feugiat, pede. Se des lectus. Done mollis hendrerit risus. Phasellus nec sem in justo. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                    </div><a href="#" class="button-reply">Reply<i class="flaticon-return13"></i></a>
                  </div>
                </div>
                <div class="comment-container clearfix">
                  <div class="author"><img src="pic/team/100x100/4.jpg" data-at2x="pic/team/100x100/4@2x.jpg" alt class="color-3">
                    <div class="author-name">Peter Doe</div>
                  </div>
                  <div class="comment-text">
                    <p class="meta">
                      <time datetime="2016-06-07T12:14:53+00:00">23 may, 2016<span>at</span> 11:21</time>
                    </p>
                    <div class="description">
                      <p>Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultrici es sit amet, nonummy id, imperdiet feugiat, pede. Se des lectus. Done mollis hendrerit risus. Phasellus nec sem in justo. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
                    </div><a href="#" class="button-reply">Reply<i class="flaticon-return13"></i></a>
                  </div>
                </div>
              </div>
            </div>
            <!-- ! comment list section -->
          </div>
          <!-- ! comments section-->
          <hr>
          <!-- toggles section-->
          <div id="toggles" class="element-section mt-60 mb-60">
            <div class="toggle">
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span class="active"><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. </div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
            </div>
          </div>
          <!-- ! toggles section-->
          <!-- toggles section style-2-->
          <div class="element-section mb-60">
            <div class="toggle style-2">
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span class="active"><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. </div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus.</div>
              <div class="content-title"> <i class="flaticon-arrow487 toggle-icon"></i><span><i class="flaticon-lights7"></i>Estibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</span></div>
              <div class="content">Aenean accumsan tellus leo. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.  Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</div>
            </div>
          </div>
          <!-- ! toggles section style-2-->
          <hr>
          <!-- twitter section-->
          <div id="twitter" class="element-section mt-40 mb-60">
            <div class="twitter-1 full-screen"></div>
          </div>
          <!-- ! twitter section-->
          <hr>
          <!-- section video-->
          <div id="video" class="element-section mt-60 mb-0 mb-md-70">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe src="https://www.youtube.com/embed/yib7tvIrL6k" class="embed-responsive-item"></iframe>
            </div>
          </div>
        </div>
        <div class="col-md-3 sidebar mt-md-70">
          <!-- widget search-->
          <aside class="widget-search">
            <form role="search" method="get" action="#" class="search-form">
              <label><span class="screen-reader-text">Search for:</span>
                <input type="search" placeholder="Search..." value="" name="s" title="Search for:" class="search-field">
              </label>
              <button type="submit" class="search-submit"><i class="flaticon-magnifying-glass34"></i></button>
            </form>
          </aside>
          <!-- ! widget search-->
          <!-- widget category-->
          <aside class="widget-items">
            <h2 class="widget-title"><i class="color-4 flaticon-list65"></i> Content Items</h2>
            <ul>
              <li><a href="#accordion">Accordion</a></li>
              <li><a href="#buttons">Buttons</a></li>
              <li><a href="#callout">Callout</a></li>
              <li><a href="#columns">Columns</a></li>
              <li><a href="#icons">Font Awesome Icons</a></li>
              <li><a href="#lists">Lists</a></li>
              <li><a href="#messages">Messages</a></li>
              <li><a href="#counter">Milestone</a></li>
              <li><a href="#pricing-tables">Pricing Tables</a></li>
              <li><a href="#progress-bar">Progress Bar</a></li>
              <li><a href="#tabs">Tabs</a></li>
              <li><a href="#team">Team</a></li>
              <li><a href="#testimonials">Testimonials</a></li>
              <li><a href="#toggles">Toggles</a></li>
              <li><a href="#twitter">Twitter</a></li>
              <li><a href="#video">Video</a></li>
            </ul>
          </aside>
          <!-- ! widget category-->
        </div>
      </div>
    </div>
    <!-- footer-->
    <footer class="footer">
      <div class="container">
        <div class="row cws-multi-col">
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer text">
              <h3>About</h3>
              <div class="divider"></div>
              <p>Ut tincidunt nisl sapien, eget gravida quama vestibulum vitae. Ut ultrices purus quis tinci dunt rutrum proin commodo ipsum.</p>
              <p>Vestibulum vitae nisl quis elit tristique egesi tas eget sed nisi. Etiam mi sapien, luctus ac tempor quis, varius eu neque.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer">
              <h3>Recent posts</h3>
              <div class="divider"></div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/7.jpg" data-at2x="pic/footer/7@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Morbi Iaculis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/8.jpg" data-at2x="pic/footer/8@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Praesent sagittis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-sm-50">
            <div class="widget-footer">
              <h3>Gallery</h3>
              <div class="divider"></div>
              <div class="gallery clearfix">
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/1.jpg" alt data-at2x="pic/footer/1@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/1@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/2.jpg" alt data-at2x="pic/footer/2@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/2@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/3.jpg" alt data-at2x="pic/footer/3@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/3@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/4.jpg" alt data-at2x="pic/footer/4@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/5.jpg" alt data-at2x="pic/footer/5@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/6.jpg" alt data-at2x="pic/footer/6@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="widget-footer">
              <h3>Contact us</h3>
              <div class="divider"></div>
              <address>
                <p>You can contact us via <a href="mailto:the8@gmail.com">the8@gmail.com</a></p><strong>Our address</strong>
                <p>250 Biscayne Blvd. (North) 11st Floor New World Tower Miami, Florida 33148</p><strong>Our phone</strong><br><a href="tel:180012345678">1-800-123-45678</a>
              </address>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="container">
          <div class="row">
            <div class="col-sm-8">
              <p>Copyrights ©2016: The8 - Premium Multipurpose WordPress Theme</p>
            </div>
            <div class="col-sm-4 text-right"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
          </div>
        </div>
      </div>
    </footer>
    <div id="scroll-top"><i class="fa fa-angle-up"></i></div>
    <!-- ! footer-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/owl.carousel.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <script type="text/javascript" src="js/cws_parallax.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <!--<script type="text/javascript" src="js/jquery.tweet.js"></script>-->
    <script type="text/javascript" src="tuner/js/colorpicker.js"></script>
    <script type="text/javascript" src="tuner/js/scripts.js"></script>
    <script type="text/javascript" src="js/retina.min.js"></script>
  </body>
</html>